<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定class和style</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-bind:class="{test1:need}">bind class </h1>
        <h1 class="static"  v-bind:class="{active:isActive,error:hasError}">bind some class </h1>
        <h1 class="static"  v-bind:class="classObject">bind  class object </h1>
        <h1 class="static"  v-bind:class="classValue">bind  class value </h1>
        <h1 class="static"  v-bind:class="[arrayClass1,arrayClass2]">bind  class array </h1>
        <h1 class="static"  v-bind:class="[isActive ? arrayClass1:'',arrayClass2]">bind  class array exp </h1>
        <h1 class="static"  v-bind:class="[{arrayClass1:isActive},arrayClass2]">bind  class array exp2 </h1>
        <h1 class="static"  v-bind:class="[classObject,arrayClass2]">bind  class array exp and obj </h1>

        <span  v-bind:style="{color:color,fontSize:fontSize + 'px'}">bind style </span><br>
        <span class="static"  v-bind:style="styleObj">bind  style object </span><br>
        <span class="static"  v-bind:style="styleVal">bind  style value </span><br>
        <span class="static"  v-bind:style="[styleObj,styleObj2]">bind  style array </span><br>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            need:true,
            isActive:true,
            hasError:false,
            classObject:{
                active:true,
                error:false
            },
            classValue:"value",
            arrayClass1:'array1',
            arrayClass2:'array2',
            color:'red',
            fontSize:20,
            styleObj:{
                color:'blue',
                fontSize:'24px',
            },
            styleVal:'color:red;',
            styleObj2:{
                float: 'right'
            }

        }
    });
 </script>
</html>